import React,{Component} from 'react';
import CardCompany from '../../widget/card/cardCompany.jsx';
import LazyLoad from 'react-lazyload';
import { search } from 'api/search.js';
import './searchCompany.scss';
import {
  Link
} from 'react-router-dom';
export default class SearchCompany extends Component{
	constructor(props) {
    super(props)
    this.state = {
    	info:[],
    	hide: 'card_hide',
    	navlist:['默认排序', '收藏量'],
    	navNum:0,
    	sort:'1',
      mergeInfo: [],
      currentPage: 0,
      lastPage: 0
    }
  }
  show (index) { //navList点击切换
    this.setState({
      navNum: index
    }, () => {
      if (this.state.navNum === 0) {
        this.setState({
          sort: 1,
          info: []
        }, () => {
          this._search(this.state.sort,1)
        })
      } else if (this.state.navNum === 1) {
        this.setState({
          sort: 2,
          info: []
        }, () => {
          this._search(this.state.sort,1)
        })
      }
    })
  }
	_search (sum, num) {
  	search({
  		searchKey:this.props.location.state.val,
  		searchType:this.props.location.state.value,
  		sort:sum,
      page: num
  	}).then(res => {
  		if (res.code===1){
  			this.setState({
          info:this.state.info.concat(res.data.data),
          currentPage: num,
          lastPage: res.data.last_page
		  	})
  		} else if (res.message === '暂无数据') {
        this.setState({
          hide: ''
        })
      }
  	})
  }
  componentDidMount(){
  	this._search(1,1)
    let that=this;
    let i=1;
    window.onscroll= function(){
      var t = document.documentElement.scrollTop||document.body.scrollTop;
      var b = document.documentElement.scrollHeight||document.body.scrollHeight;
      var h = document.documentElement.clientHeight||document.body.clientHeight;
      if((+t+h) == b && i <= that.state.lastPage && t!==0){
        that._search(that.state.sort,i++)
      }
    }
  }
	render(){
		return(
			<div className="searchCompany">
				<div className="big_title">
					<Link to='/search'><div className="glyphicon glyphicon-back"></div></Link>
					<Link to='/search'><p className="search">{this.props.location.state.val}</p></Link>
					<Link to='/search'><div className="company_search">搜索</div></Link>
				</div>
				<div className="big_nav guding">
				{
					this.state.navlist.map((item,index) => {
            return(
              <div onClick={this.show.bind(this,index)} className={this.state.navNum === index ? 'active' : undefined} key={index}>{item}
              </div>
            )
          })
				}
				</div>
				<div className="searchlist_content">
					{this.state.info.map((item, index) => {
						return(
							<LazyLoad offsetTop={200} key={index} height={0}>
                <CardCompany shopDetail={{...item}}/>
              </LazyLoad>
						)
          })}
				</div>
				<div className="search_bg"></div>
				<div className={`kong ${this.state.hide}`}>
					<div>
						<span className="glyphicon glyphicon-company big"></span>
						<p>搜索不到该公司，换个角度试试看！</p>
					</div>
				</div>
        <div className={this.state.currentPage >= this.state.lastPage ? 'noMore' : 'card_hide'} style={{textAlign: 'center'}}>————  老板，没有更多了！ ————</div>
			</div>
		)
	}
}